<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<script src="lib/wad.min.js"></script>
		<title>Guitar Tab Player</title>
		<link rel="stylesheet" href="css/TabPlayer.css">

	</head>

	<body>
	<div id="content">
		<div id="header">
			<a id="top" target="_blank" href="#">
				<img id="logo" src="./images/guitar.png" height="50px" width="50px"/>
				<h1>iCreate<span id="name">-GuitarSimulator</span></h1>
			</a>
			<ul id="nav">
				<li><a href="index.html">首页</a></li>
				<li><a href="TabPlayer.html">Player</a></li>
				<li><a href="#">说明</a></li>
				<li><a href="#" >壁纸</a></li>
			</ul>
		</div>
		<div class="col-md-8 col-md-offset-2">
				<h2>Guitar Tab Player</h2>

			<div class="container-fluid">
				<h4>复制Guitar Tab粘贴到下方碟片中即可播放！！！</h4>
				<textarea id="tab">
e|-0-0-0---0-3-----| |----------------------0-3-5--1-3-0--------|
B|-------1---------| |-1----------0---------1-5-6--3-5-1--1-3-0-|
G|-----------0---0-| |-0--0-----2-0-3-2---0---------------2-4-0-|
D|-0-0-0-0---------| |----2--2--3---4-3---2---------------------|
A|-----------------| |-------3----------------------------------|
E|---------------3-| |------------------------------------------|

|----------------------0-3-5--1-3-0--------|
|-1----------0---------1-5-6--3-5-1--1-3-0-|
|-0--0-----2-0-3-2---0---------------2-4-0-|
|----2--2--3---4-3---2---------------------|
|-------3----------------------------------|
|------------------------------------------|

e|---3-2-1-----0-------------------3-2-1-----0--8-8-8------3-2-1-----0-------------------------------|
B|---------4-----------1-----1-3---------4------8-8-8------------4-----------1-----1-3--4-3-1--------|
G|-----0-----5-----1-2-----2---------0-----5-----------------0-----5-----1-2-----2------5-3-0--------|
D|----------------------------------------------------5-------------------------------------2--5-5---|
A|-3---------------------3-------3-----------------------3---------------------3----------1-3------3-|
E|---------------1-----------1-----------------------------------------1-----------1----4------------|

e|---3-2-1-----0-------------------3-2-1-----0--8-8-8------3-2-1-----0-------------------------------|
B|---------4-----------1-----1-3---------4------8-8-8------------4-----------1-----1-3--4-3-1--------|
G|-----0-----5-----1-2-----2---------0-----5-----------------0-----5-----1-2-----2------5-3-0--------|
D|----------------------------------------------------5-------------------------------------2--5-5---|
A|-3---------------------3-------3-----------------------3---------------------3----------1-3------3-|
E|---------------1-----------1-----------------------------------------1-----------1----4------------|

e|------------------------------------------------------------|
B|-1-1--1-1-3-5-1-------1-1--1-1-3-5-------1-1--1-1-3-5-1-----|
G|-1----1---3-----2-0---1----1---3---------1----1---3-----2-0-|
D|------1-----5-2-2----------1-----5------------1-----5-2-2---|
A|------------3--------------------3---3--------------3-------|
E|-4----------------3-3-4----------------3-4----------------3-|

e|-0-0-0---0-3-----| |----------------------0-3-5--1-3-0--------|
B|-------1---------| |-1----------0---------1-5-6--3-5-1--1-3-0-|
G|-----------0---0-| |-0--0-----2-0-3-2---0---------------2-4-0-|
D|-0-0-0-0---------| |----2--2--3---4-3---2---------------------|
A|-----------------| |-------3----------------------------------|
E|---------------3-| |------------------------------------------|

|----------------------0-3-5--1-3-0--------|
|-1----------0---------1-5-6--3-5-1--1-3-0-|
|-0--0-----2-0-3-2---0---------------2-4-0-|
|----2--2--3---4-3---2---------------------|
|-------3----------------------------------|
|------------------------------------------|

e|-0-----------1-1-------5-5-5-3-1-0----------0------------1-1-------1-1-1-0------------|
B|---1-----------1-----0---6---5-3---1----------1------------1-----0-0-0-0-1-3-1--------|
G|-----0---1-2-----2---0---0---0--------2-0-------0---1--2-----2---0---------0-0--------|
D|-----------3---3-3-------------3-----------------------3---3-3---------------2-2--2---|
A|-3-------3-----------------------3----------3-------3--------------------0-2-3------3-|
E|-------3---1-----1---3----------------2-3---------3----1-----1---3---3-3--------------|

e|-0-----------1-1-------5-5-5-3-1-0----------0------------1-1-------1-1-1-0------------|
B|---1-----------1-----0---6---5-3---1----------1------------1-----0-0-0-0-1-3-1--------|
G|-----0---1-2-----2---0---0---0--------2-0-------0---1--2-----2---0---------0-0--------|
D|-----------3---3-3-------------3-----------------------3---3-3---------------2-2--2---|
A|-3-------3-----------------------3----------3-------3--------------------0-2-3------3-|
E|-------3---1-----1---3----------------2-3---------3----1-----1---3---3-3--------------|

e|------------------------------------------------------------| |-0-0-0---0-3-----|
B|-1-1--1-1-3-5-1-------1-1--1-1-3-5-------1-1--1-1-3-5-1-----| |-------1---------|
G|-1----1---3-----2-0---1----1---3---------1----1---3-----2-0-| |-----------0---0-|
D|------1-----5-2-2----------1-----5------------1-----5-2-2---| |-0-0-0-0---------|
A|------------3--------------------3---3--------------3-------| |-----------------|
E|-4----------------3-3-4----------------3-4----------------3-| |---------------3-|

e|-----------------------------------------|
B|-1------------0--------------------------|
G|-0--0-----2------2-------3---------------|
D|----2--2--3----------6-----6---5---3---5-|
A|-------3-------------4---------3---------|
E|----------1------------------------------|

e|-----------0-3---0---------------4-------------------6---6-6-6-8-|
B|---------1-------------------1-4-----4-----------3-6-------------|
G|-------0-------------------1-------------------3---------7-7-7-9-|
D|-----2-------------------1-------------------3-------------------|
A|---3-------------------3-------------------5---------------------|
E|-3-------------------4-------------------6---------------------8-|</textarea>
				</div>
				<br>
		</div>
		<div class="col-md-4 col-md-offset-4">
			<div class="container-fluid">
				<div class="form-group">
					<div class="btn">
					<label for="speed"><b>毫秒/音符:</b></label>
					<input id="speed" type="number" value="75" class="form-control">
					</div>
					<br>
					<button class="btn2" id="play"><span class="glyphicon glyphicon-play"></span>&nbsp;Play Your Tab!</button>
					<br>
					<br>
					<button class="btn2" id="stop"><span class="glyphicon glyphicon-stop"></span>&nbsp;Stop</button>

				</div>
			</div>
		</div>
		<br>

		<footer>
			北京市海淀区学院路30号 <a href="https://www.ustb.edu.cn/">北京科技大学</a>.
			Made by <a href="https://github.com/JackHCC">JackHCC</a>.
		</footer>
		<br>
		<hr>
	</div>


	</body>
	<script>

		var guitars = []


		var frequencies = [
			/*e*/[330, 349, 370, 392, 415, 440, 466, 494, 523, 554, 587, 622, 659, 698, 740, 784, 831, 880, 932, 988, 1047],
			/*b*/[247, 262, 277, 294, 311, 330, 349, 370, 392, 415, 440, 466, 494, 523, 554, 587, 622, 659, 698, 740, 784],
			/*g*/[196, 208, 220, 233, 247, 262, 277, 294, 311, 330, 349, 370, 392, 415, 440, 466, 494, 523, 554, 587, 622],
			/*d*/[147, 156, 165, 175, 185, 196, 208, 220, 233, 247, 262, 277, 294, 311, 330, 349, 370, 392, 415, 440, 466],
			/*a*/[110, 117, 123, 131, 139, 147, 156, 165, 175, 185, 196, 208, 220, 233, 247, 262, 277, 294, 311, 330, 349],
			/*E*/[82, 87, 92, 98, 104, 110, 117, 123, 131, 139, 147, 156, 165, 175, 185, 196, 208, 220, 233, 247, 262]
		]

		function makeGuitar(){
			var guitar = new Wad(Wad.presets.piano)
			guitar.source = "sawtooth"
			return guitar
		}

		function playNotes(arr){//arr is a 2 slot array, containing 6 slot arrays, with either a number (0-20, inclusive), or null
			var play = []
			var amount = 1;

			for(var i = 0; i < arr[0].length; i++){
				if(isNaN(arr[0][i]))
					continue;

				if(!isNaN(arr[1][i]))//if the next digit is _also_ a number (which means that the tab is something like 10)
					amount = 2
			}

			for(var i = 0; i < arr[0].length; i++){
				if(isNaN(arr[0][i]))
					continue;

				var freq = 0;
				var string = guitars[i];

				for(var j = 0; j < amount; j++){
					if(!isNaN(parseInt(arr[j][i]))){
						freq *= Math.pow(10, j)
						freq += parseInt(arr[j][i])
					}

				}

				string.play({pitch: frequencies[i][freq]})
			}

			return amount
		}

		function mute(){// currently a bit buggy
			for(var i = 0; i < guitars.length; i++){
				// console.log(i)
				try{
					guitars[i].stop()
				} catch(e){}
			}
		}

		for(var i = 0; i < frequencies.length; i++)
			guitars[i] = makeGuitar()

		var chordRegex = /[EBGDA]/gi;
		var breakRegex = /\-\|\-/g;

		function cleanTab(tab){
			for(var i = 0; i < tab.length; i++){
				tab[i] = tab[i].replace(chordRegex,"");
				tab[i] = tab[i].replace(breakRegex,"-");
				tab[i] = tab[i].replace(/\|/g, "");
			}

			return tab;
		}

		function addToSong(song, arr){
			for(var i = 0; i < song.length; i++)
				song[i] += arr[i]
			return song
		}

		function songToNotes(song, index){
			var ret = [];

			for(var i = 0; i < song.length; i++)
				ret.push(song[i].substr(index, 1))

			return ret
		}


		var index = 0;
		var musicInterval = 0;

		function playSong(song){
			index = 0;
			clearInterval(musicInterval)

			musicInterval = setInterval(function(){
				if(index >= song[0].length)
				// index %= song[0].length;//the show must go on!
					return clearInterval(musicInterval)

				var notes = songToNotes(song, index);
				var nextNotes = songToNotes(song, index+1);
				// mute();


				index+=playNotes([notes, nextNotes]);

			}, document.getElementById('speed').value)
		}

		var play = document.getElementById('play');

		function playClick(){
			var text = document.getElementById('tab').value;
			text = text.replace(/\n+/g, "\n").replace(/^\n/g,"").split("\n");

			var newSong = ["", "", "", "", "", ""]

			for(var i = 0; i < text.length; i++)
				newSong[i % newSong.length] += text[i]

			clearInterval(musicInterval)

			playSong(newSong)
		}

		play.onclick = function(){
			playClick()
		}

		var stop = document.getElementById('stop');

		stop.onclick = function(){
			clearInterval(musicInterval)
		}

	</script>
</html>